<!-- 员工管理 -->
<template>
  <div class="app-container">
    <el-form :model="filterFormData" ref="form" size="small" :inline="true">
      <!-- 姓名 -->
      <el-form-item label="姓名：" prop="name">
        <el-input
          id="name"
          v-model="filterFormData.name"
          placeholder="请输入"
          style="width: 170px"
          clearable
        ></el-input>
      </el-form-item>
      <!-- 性别 -->
      <el-form-item label="性别：" prop="gender">
        <el-select
          id="role"
          v-model="filterFormData.gender"
          placeholder="请选择"
          style="width: 170px"
          clearable
        >
          <el-option
            v-for="item in $genderList"
            :key="item.key"
            :label="item.name"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 手机号 -->
      <el-form-item label="手机号：" prop="phoneContent">
        <el-input
          id="phoneContent"
          v-model="filterFormData.phoneContent"
          placeholder="请输入"
          style="width: 170px"
          clearable
        ></el-input>
      </el-form-item>
      <!-- 所属角色 -->
      <el-form-item label="所属角色：" prop="role">
        <el-select
          id="model"
          v-model="filterFormData.role"
          placeholder="请选择"
          style="width: 170px"
          clearable
        >
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 创建时间 -->
      <el-form-item label="创建时间：" prop="createTime">
        <el-date-picker
          v-model="filterFormData.createTime"
          type="date"
          value-format="timestamp"
          placeholder="选择日期"
          style="width: 170px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetFilterForm"
          >重置</el-button
        >
      </el-form-item>
      <el-button
        style="float: right"
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="handleAddNew"
        >新增</el-button
      >
    </el-form>

    <!-- table -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      fit
      max-height="605"
    >
      <el-table-column
        prop="name"
        label="姓名"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column prop="genderName" label="性别"></el-table-column>
      <el-table-column prop="phoneContent" label="手机号">
        <template slot-scope="scope">{{
          scope.row.dialCode + " " + scope.row.phoneContent
        }}</template>
      </el-table-column>
      <el-table-column
        prop="department"
        label="所属部门"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="roleName"
        label="所属角色"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template slot-scope="scope">{{
          parseTime(scope.row.createTime)
        }}</template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <a
            style="color: #ff000dff; font-size: 14px"
            @click="handleDel(scope.row)"
            >删除</a
          >
          <a
            style="margin-left: 14px; color: #1890ffff; font-size: 14px"
            @click="handleEdit(scope.row)"
            >编辑</a
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getListHttpRequest"
    />
    <!-- 新增/编辑员工弹窗 -->
    <addEditDialog
      :dialogData="addEditDialogData"
      :roleList="roleList"
      @dialogConfirm="getListHttpRequest"
    >
    </addEditDialog>
    <!-- 控制弹窗 -->
    <controlDialog
      :dialogData="controlDialogData"
      @dialogConfirm="refreshList"
    ></controlDialog>
  </div>
</template>
  
<script>
import addEditDialog from "./staffComponents/add-edit-dialog.vue";
import controlDialog from "./staffComponents/control-dialog.vue";
//请求
import { getStaffList, getRoleFilterList } from "@/api/staff_role";

export default {
  components: {
    addEditDialog,
    controlDialog,
  },
  data() {
    return {
      // 筛选表单数据
      filterFormData: {
        name: "",
        gender: "",
        phoneContent: "",
        role: "",
        createTime: "",
      },
      langList: [],
      roleList: [],
      // 列表数据
      list: [],
      listLoading: false,
      total: 0,
      listQuery: {
        pageNum: 1, //页码 默认1
        pageSize: 10, //页大小 默认10
      },
      //新建/编辑员工弹窗
      addEditDialogData: {
        type: "ADD",
        show: false,
      },
      //控制弹窗
      controlDialogData: {
        show: false,
      },
    };
  },
  mounted() {
    this.getListHttpRequest();
  },
  created() {
    this.handleGetRoleList();
  },
  methods: {
    //获取角色列表
    handleGetRoleList() {
      getRoleFilterList()
        .then((response) => {
          this.roleList = response.data.roleList;
        })
        .catch(() => {});
    },
    //重置筛选条件
    resetFilterForm() {
      this.$refs.form.resetFields();
    },
    //新增员工
    handleAddNew() {
      this.addEditDialogData = {
        type: "ADD",
        show: true,
      };
    },
    //编辑员工
    handleEdit(rowData) {
      this.addEditDialogData = {
        type: "EDIT",
        show: true,
        ...rowData,
      };
    },
    //删除员工
    handleDel(rowData) {
      this.controlDialogData = {
        show: true,
        ...rowData,
      };
    },
    //根据筛选条件进行查询
    handleQuery() {
      this.listQuery = {
        pageNum: 1,
        pageSize: 10,
        ...this.filterFormData,
      };
      this.getListHttpRequest();
    },

    //列表请求
    getListHttpRequest() {
      this.listLoading = true;
      getStaffList(this.listQuery)
        .then((response) => {
          this.total = response.data.total;
          this.list = response.data.list;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },

    //删除成功 刷新列表
    refreshList() {
      if (this.list.length == 1 && this.listQuery.pageNum > 1) {
        this.listQuery.pageNum -= 1;
      }
      this.getListHttpRequest();
    },
  },
};
</script>
  
<style></style>